<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link active">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93">服务端渲染<a class="anchor" href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93">§</a></h2>
<p>由于服务端是无状态的，所以服务端渲染和客户端渲染并不相同. 最基本的就是我们封装app时, 使用无状态的 &lt; StaticRouter &gt;来代替&lt; BrowserRouter &gt;, 使用来自于服务端的请求url来匹配路由。接下来我们会讨论 context 属性</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token operator">/</span><span class="token operator">/</span> client
<span class="token operator">&lt;</span>BrowserRouter<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>

<span class="token operator">/</span><span class="token operator">/</span> server <span class="token punctuation">(</span><span class="token operator">not</span> the complete story<span class="token punctuation">)</span>
<span class="token operator">&lt;</span>StaticRouter
  location<span class="token operator">=</span>{req<span class="token punctuation">.</span>url}
  context<span class="token operator">=</span>{context}
<span class="token operator">></span>
  <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
</code></pre>
<p>当你在客户端渲染 &lt; Redirect &gt;, 浏览器地址栏会改变状态使我们能看到新的页面,然而在一个静态的服务环境下, 我们不能够改变app的状态。代替的是, 我们将渲染的结果赋给context属性. 如果我们找到了 context.url, 那么我们知道这个app重定向了. 这允许我们向服务端发送一个重定向请求</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> context <span class="token operator">=</span> {}
<span class="token keyword">const</span> markup <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>StaticRouter
    location<span class="token operator">=</span>{req<span class="token punctuation">.</span>url}
    context<span class="token operator">=</span>{context}
  <span class="token operator">></span>
    <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
<span class="token punctuation">)</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span> {
  <span class="token operator">/</span><span class="token operator">/</span> Somewhere a `<span class="token operator">&lt;</span>Redirect<span class="token operator">></span>` was rendered
  <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token number">301</span><span class="token punctuation">,</span> context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
} <span class="token keyword">else</span> {
  <span class="token operator">/</span><span class="token operator">/</span> we're good<span class="token punctuation">,</span> send the response
}
</code></pre>
<h3 id="%E6%B7%BB%E5%8A%A0%E6%98%8E%E7%A1%AE%E7%9A%84%E5%BA%94%E7%94%A8%E5%86%85%E5%AE%B9%E4%BF%A1%E6%81%AF">添加明确的应用内容信息<a class="anchor" href="#%E6%B7%BB%E5%8A%A0%E6%98%8E%E7%A1%AE%E7%9A%84%E5%BA%94%E7%94%A8%E5%86%85%E5%AE%B9%E4%BF%A1%E6%81%AF">§</a></h3>
<p>路由只能添加 context.url. 但是你可能想要发送重定向的301或302的响应。或许你在某些特殊的UI渲染后需要发送一个404响应, 又或者在客户端没有认证的情况下发送401。 context属性是属于你的, 所以你可以任意改变她. 下面是分辨301与302重定向的方法。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> RedirectWithStatus <span class="token operator">=</span> <span class="token punctuation">(</span>{ from<span class="token punctuation">,</span> <span class="token keyword">to</span><span class="token punctuation">,</span> status }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>Route render<span class="token operator">=</span>{<span class="token punctuation">(</span>{ staticContext }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
    <span class="token operator">/</span><span class="token operator">/</span> there is no `staticContext` on the client<span class="token punctuation">,</span> so
    <span class="token operator">/</span><span class="token operator">/</span> we need <span class="token keyword">to</span> guard against that here
    <span class="token keyword">if</span> <span class="token punctuation">(</span>staticContext<span class="token punctuation">)</span>
      staticContext<span class="token punctuation">.</span>status <span class="token operator">=</span> status
    return <span class="token operator">&lt;</span>Redirect from<span class="token operator">=</span>{from} <span class="token keyword">to</span><span class="token operator">=</span>{<span class="token keyword">to</span>}<span class="token operator">/</span><span class="token operator">></span>
  }}<span class="token operator">/</span><span class="token operator">></span>
<span class="token punctuation">)</span>

<span class="token operator">/</span><span class="token operator">/</span> somewhere <span class="token keyword">in</span> your app
<span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
    {<span class="token operator">/</span><span class="token operator">*</span> some other routes <span class="token operator">*</span><span class="token operator">/</span>}
    <span class="token operator">&lt;</span>RedirectWithStatus
      status<span class="token operator">=</span>{<span class="token number">301</span>}
      from<span class="token operator">=</span><span class="token string">"/users"</span>
      <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/profiles"</span>
    <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span>RedirectWithStatus
      status<span class="token operator">=</span>{<span class="token number">302</span>}
      from<span class="token operator">=</span><span class="token string">"/courses"</span>
      <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/dashboard"</span>
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
<span class="token punctuation">)</span>

<span class="token operator">/</span><span class="token operator">/</span> on the server
<span class="token keyword">const</span> context <span class="token operator">=</span> {}

<span class="token keyword">const</span> markup <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>StaticRouter context<span class="token operator">=</span>{context}<span class="token operator">></span>
    <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
<span class="token punctuation">)</span>

<span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span> {
  <span class="token operator">/</span><span class="token operator">/</span> can use the `context<span class="token punctuation">.</span>status` that
  <span class="token operator">/</span><span class="token operator">/</span> we added <span class="token keyword">in</span> RedirectWithStatus
  <span class="token function">redirect</span><span class="token punctuation">(</span>context<span class="token punctuation">.</span>status<span class="token punctuation">,</span> context<span class="token punctuation">.</span>url<span class="token punctuation">)</span>
}
</code></pre>
<h3 id="404-401-%E6%88%96%E5%85%B6%E4%BB%96%E7%8A%B6%E6%80%81">404, 401, 或其他状态<a class="anchor" href="#404-401-%E6%88%96%E5%85%B6%E4%BB%96%E7%8A%B6%E6%80%81">§</a></h3>
<p>我们现在可以做到和上面一样的事，创建一个包含想要内容的组件，当收到不同的的状态码时可以在应用的任何地方渲染该组件。</p>
<pre class="language-autoit"><code class="language-autoit">function <span class="token function">Status</span><span class="token punctuation">(</span>{ code<span class="token punctuation">,</span> children }<span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Route
      render<span class="token operator">=</span>{<span class="token punctuation">(</span>{ staticContext }<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
        <span class="token keyword">if</span> <span class="token punctuation">(</span>staticContext<span class="token punctuation">)</span> staticContext<span class="token punctuation">.</span>status <span class="token operator">=</span> code<span class="token comment">;</span>
        return children<span class="token comment">;</span>
      }}
    <span class="token operator">/</span><span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}
</code></pre>
<p>现在，当你想要给静态内容添加一个状态码时，你可以在应用的任何地方渲染一种状态。</p>
<pre class="language-autoit"><code class="language-autoit">function <span class="token function">NotFound</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Status code<span class="token operator">=</span>{<span class="token number">404</span>}<span class="token operator">></span>
      <span class="token operator">&lt;</span>div<span class="token operator">></span>
        <span class="token operator">&lt;</span>h1<span class="token operator">></span>Sorry<span class="token punctuation">,</span> can’t find that<span class="token punctuation">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Status<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

<span class="token operator">/</span><span class="token operator">/</span> somewhere <span class="token keyword">else</span>
<span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/about"</span> component<span class="token operator">=</span>{About} <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/dashboard"</span> component<span class="token operator">=</span>{Dashboard} <span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span>Route component<span class="token operator">=</span>{NotFound} <span class="token operator">/</span><span class="token operator">></span>
<span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span><span class="token comment">;</span>
</code></pre>
<h3 id="%E7%BB%84%E5%90%88%E6%89%80%E6%9C%89%E5%86%85%E5%AE%B9">组合所有内容<a class="anchor" href="#%E7%BB%84%E5%90%88%E6%89%80%E6%9C%89%E5%86%85%E5%AE%B9">§</a></h3>
<p>虽然这不是一个真正的应用，但是她展现了将所有内容组合在一起所需的常规部分</p>
<pre class="language-autoit"><code class="language-autoit">import { createServer } from <span class="token string">'http'</span>
import React from <span class="token string">'react'</span>
import ReactDOMServer from <span class="token string">'react-dom/server'</span>
import { StaticRouter } from <span class="token string">'react-router'</span>
import App from <span class="token string">'./App'</span>

<span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span>req<span class="token punctuation">,</span> res<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token keyword">const</span> context <span class="token operator">=</span> {}

  <span class="token keyword">const</span> html <span class="token operator">=</span> ReactDOMServer<span class="token punctuation">.</span><span class="token function">renderToString</span><span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>StaticRouter
      location<span class="token operator">=</span>{req<span class="token punctuation">.</span>url}
      context<span class="token operator">=</span>{context}
    <span class="token operator">></span>
      <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>StaticRouter<span class="token operator">></span>
  <span class="token punctuation">)</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>context<span class="token punctuation">.</span>url<span class="token punctuation">)</span> {
    res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">301</span><span class="token punctuation">,</span> {
      Location<span class="token punctuation">:</span> context<span class="token punctuation">.</span>url
    }<span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  } <span class="token keyword">else</span> {
    res<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>`
      <span class="token operator">&lt;</span>!doctype html<span class="token operator">></span>
      <span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span>${html}<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    `<span class="token punctuation">)</span>
    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  }
}<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span><span class="token number">3000</span><span class="token punctuation">)</span>
</code></pre>
<p>然后是客户端</p>
<pre class="language-autoit"><code class="language-autoit">import ReactDOM from <span class="token string">'react-dom'</span>
import { BrowserRouter } from <span class="token string">'react-router-dom'</span>
import App from <span class="token string">'./App'</span>

ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>BrowserRouter<span class="token operator">></span>
    <span class="token operator">&lt;</span>App<span class="token operator">/</span><span class="token operator">></span>
  <span class="token operator">&lt;</span><span class="token operator">/</span>BrowserRouter<span class="token operator">></span>
<span class="token punctuation">)</span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<h3 id="%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD">数据加载<a class="anchor" href="#%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD">§</a></h3>
<p>要做到这一点有很多不同的方法，对此并没有最佳的实践。所以我们寻求多种方法的不同组合方式，而不是规定或倾向某一种。我们相信React Router可以在你的应用的规则限制下找到一种合理的方式。</p>
<p>最主要的约束是你希望在页面渲染前加载完数据。React Router暴露了一个matchPath静态函数，你可以用她来进行路由匹配。你可以在服务端用这个函数来确定哪些依赖的数据是要在渲染前完成的。</p>
<p>这种方法的特点是在进行实际跳转前设定好静态匹配规则，在实际跳转前就已经知道要使用哪些数据。</p>
<pre class="language-autoit"><code class="language-autoit"><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>
  { path<span class="token punctuation">:</span> <span class="token string">'/'</span><span class="token punctuation">,</span>
    component<span class="token punctuation">:</span> Root<span class="token punctuation">,</span>
    loadData<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">getSomeData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  }<span class="token punctuation">,</span>
  <span class="token operator">/</span><span class="token operator">/</span> etc<span class="token punctuation">.</span>
<span class="token punctuation">]</span>
</code></pre>
<p>然后使用这些规则在应用中渲染你的路由</p>
<pre class="language-autoit"><code class="language-autoit">import { routes } from <span class="token string">'./routes'</span>

<span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>
    {routes<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>route <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
      <span class="token operator">&lt;</span>Route {<span class="token punctuation">.</span><span class="token punctuation">.</span><span class="token punctuation">.</span>route}<span class="token operator">/</span><span class="token operator">></span>
    <span class="token punctuation">)</span><span class="token punctuation">)</span>}
  <span class="token operator">&lt;</span><span class="token operator">/</span><span class="token keyword">Switch</span><span class="token operator">></span>
<span class="token punctuation">)</span>
</code></pre>
<p>在服务端你可能会做这些；</p>
<pre class="language-autoit"><code class="language-autoit">import { matchPath } from <span class="token string">'react-router-dom'</span>

<span class="token operator">/</span><span class="token operator">/</span> inside a request
<span class="token keyword">const</span> promises <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token operator">/</span><span class="token operator">/</span> use `some` <span class="token keyword">to</span> imitate `<span class="token operator">&lt;</span><span class="token keyword">Switch</span><span class="token operator">></span>` behavior of selecting only
<span class="token operator">/</span><span class="token operator">/</span> the first <span class="token keyword">to</span> match
routes<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>route <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token operator">/</span><span class="token operator">/</span> use `matchPath` here
  <span class="token keyword">const</span> match <span class="token operator">=</span> <span class="token function">matchPath</span><span class="token punctuation">(</span>req<span class="token punctuation">.</span>url<span class="token punctuation">,</span> route<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>match<span class="token punctuation">)</span>
    promises<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span><span class="token function">loadData</span><span class="token punctuation">(</span>match<span class="token punctuation">)</span><span class="token punctuation">)</span>
  return match
}<span class="token punctuation">)</span>

Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span>promises<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>data <span class="token operator">=</span><span class="token operator">></span> {
  <span class="token operator">/</span><span class="token operator">/</span> <span class="token keyword">do</span> something w<span class="token operator">/</span> the data so the client
  <span class="token operator">/</span><span class="token operator">/</span> can access it <span class="token keyword">then</span> render the app
}<span class="token punctuation">)</span>
</code></pre>
<p>最后，客户端需要获取数据。我们并不是给你的应用规定数据加载的模式，但这些是在开发中常用的形式。</p>
<p>你可能会对我们的进行数据加载和静态路由配置的<a href="https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config">React Router Config</a>包感兴趣。</p></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93">服务端渲染</a><ol><li><a href="#%E6%B7%BB%E5%8A%A0%E6%98%8E%E7%A1%AE%E7%9A%84%E5%BA%94%E7%94%A8%E5%86%85%E5%AE%B9%E4%BF%A1%E6%81%AF">添加明确的应用内容信息</a></li><li><a href="#404-401-%E6%88%96%E5%85%B6%E4%BB%96%E7%8A%B6%E6%80%81">404, 401, 或其他状态</a></li><li><a href="#%E7%BB%84%E5%90%88%E6%89%80%E6%9C%89%E5%86%85%E5%AE%B9">组合所有内容</a></li><li><a href="#%E6%95%B0%E6%8D%AE%E5%8A%A0%E8%BD%BD">数据加载</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/ServerRendering.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>